<template>
  <div>
    <noMore v-if="listData.length == 0"></noMore>
    <div class="invitationBox" v-for="(item, index) in listData" :key="index">
      <div class="flexBox">
        <!-- <div class="leftImg">
            <el-image
              style="width: 123px; height: 123px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              fit="cover"
            ></el-image>
        </div>-->
        <div>
          <div class="invitationBoxTitle" @click="toDetails(item)">
            {{ item.problemname }}
          </div>
          <!-- <div
              class="invitationBoxSubTitle"
          >道家入驻协议本协议中平台上的道家是甲方，靓道网是乙方山西居善地文化传播有限公司，包括网站、APP、微信公众号、小程序。靓道网分交费年费制会员储值消费积分卡和免费会员消费积分卡。A、甲方经营类目对应相关协议：一、甲方经营类目在乙方体验平台属于乙方板块的分：体验、文化、集市。《农家乐农业体验类入驻协议》《景区渡假村入驻协议》《设计服务软件开发服务入驻协议》《智能AI服务入驻协议》《文化艺术品软性服务入</div>-->
          <div class="invitationBoxBottom">
            <div class="audit" v-if="!item.audit">未审核通过</div>
            <div class="invitationBoxBottomItem">{{ item.reading }} 次浏览</div>
            <div class="invitationBoxBottomItem">{{ item.reply }} 个回答</div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size="limitSize"
      layout="prev, pager, next, jumper"
      :total="articleSize"
    ></el-pagination>
  </div>
</template>

<script>
import { get_problem } from "@/api/problem";
import noMore from "../../../components/noMore";
export default {
  name: "helpList",
  components: {
    noMore
  },
  props: ["userid"],
  data() {
    return {
      isSelect: "热门",
      listData: [],
      // currentPage: 1,
      skipSize: 0, //开始位置
      articleSize: 0, //总文章
      limitSize: 10,
      sortSelect: {
        sort: {
          release_time: -1
        }
      } //排序
    };
  },
  watch: {
    async $route() {
      //监听路由是否变化
      this.getProblem(this.sortSelect);
    }
  },
  created() {
    this.getProblem(this.sortSelect);
  },
  methods: {
    async getProblem(query) {
      let Data = await get_problem({
        query: {
          audit: true,
          userid: this.userid
        },
        ...query,
        skip: this.skipSize,
        limit: this.limitSize,
        count: true
      });
      console.log("listData", Data);
      this.listData = Data.data;
      this.articleSize = Data.countnum;
    },
    handleCurrentChange(val) {
      this.skipSize = (val - 1) * this.limitSize;
      console.log(`当前页: ${val}`);
      this.getProblem(this.sortSelect);
    },
    toDetails(item) {
      this.$router.push({
        path: "/helpDetails",
        query: {
          problem_id: item._id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.invitationBox {
  .flexBox {
    // display: flex;
    // .leftImg {
    //   margin-right: 20px;
    // }
    .invitationBoxTitle {
      font-size: 23px;
      font-weight: 600;
      color: #333;
      margin-bottom: 15px;
      // width: 850px;
      overflow: hidden;
      text-overflow: ellipsis; //超出部分以省略号显示
      // white-space: nowrap;
      display: -webkit-box;
      -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
      -webkit-box-orient: vertical;
      cursor: pointer;
      &:hover {
        color: #1d2f70;
        text-decoration: underline;
      }
    }
    .invitationBoxSubTitle {
      color: #6c6c6c;
      font-size: 17px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
      -webkit-box-orient: vertical;
    }
    .invitationBoxBottom {
      display: flex;
      margin-top: 14px;
      color: #b3b2b2;
      justify-content: flex-end;
      .invitationBoxBottomItem {
        margin-right: 18px;
        font-size: 14px;
      }
      .audit {
        color: red;
        font-weight: 600;
        margin-right: 10px;
      }
    }
  }
}
</style>
